import { Button, Popup, Space } from '@nutui/nutui-react-taro'
import { Image, Text, View } from '@tarojs/components'
import { navigateTo, useDidHide, useDidShow, useLoad } from '@tarojs/taro'
import { Welcome } from '@/components'
import logo from '@/images/my-active.png'

import { useCount, useDialog, useInit } from './hooks'
import './index.scss'

export default function Index() {
  const { count, handleDecrement, handleIncrement } = useCount()
  const { show, handleOpen, handleClose } = useDialog()
  const { title } = useInit()

  function handleJump() {
    navigateTo({ url: '/pages/other/index' })
  }

  useLoad(options => {
    console.log('page load', options)
  })

  useDidShow(options => {
    console.log('page show', options)
  })

  useDidHide(() => {
    console.log('page hide')
  })

  return (
    <View className="flex flex-col items-center">
      <View >
        <Image className="w-24 h-24" src={logo} />
      </View>
      <View >
        <Welcome msg={title} />
        <Text>{count}</Text>
        <View >
          <Space>
            <Button type="primary" onClick={handleIncrement}>
              +
            </Button>
            <Button type="primary" onClick={handleDecrement}>
              -
            </Button>
          </Space>
        </View>
        <Button  type="primary" onClick={handleOpen}>
          弹窗
        </Button>
        <Button  type="primary" onClick={handleJump}>
          跳转
        </Button>
      </View>
      <Popup visible={show} closeable onClose={handleClose}>
        <View >
          <View >
            <Text>Hello World</Text>
          </View>
        </View>
      </Popup>
    </View>
  )
}
